<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="单位，联系人，电话等"
            v-model="query.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="起扣月：" prop="beginDate">
          <el-date-picker
            v-model="query.beginDate"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束月：" prop="endDate">
          <el-date-picker
            v-model="query.endDate"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
            >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
            >搜索</el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              @click="orderExport"
              v-if="userInfoExport"
              >导出</el-button
            >
             <el-button
                size="small"
                type="primary"
                @click="onOverdueRecord"
                v-no-more-click
                >逾期扣款记录</el-button
             >
            <!-- <el-button
              icon="el-icon-circle-plus-outline"
              size="small"
              type="primary"
              v-no-more-click
              >更新数据</el-button
            > -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeFun"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      />
      <el-table-column
        prop="executeTime"
        label="执行分期月"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="executeNum"
        label="总分期笔数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="withHoldNum"
        label="已执行扣款"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="executeTotalAmount"
        label="执行扣款总额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="notExecuteNum"
        label="未执行数量"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="failNum"
        label="扣款失败数量"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="failAmount"
        label="扣款失败总额"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overdueNum"
        label="逾期笔数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="detailsFun(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >分期明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="分期明细"
      :visible.sync="PersonnelDia"
      width="70%"
      top="30px"
    >
      <Monthly
        :golbalPermissions="golbalPermissions"
        v-if="PersonnelDia"
        :PersonnelDia="PersonnelDia"
        :executeTime="executeTime"
      ></Monthly>
    </el-dialog>
  </div>
</template>

<script>
import { getPageMonth } from "../../../src/assets/js/api";
import Monthly from "../../components/byStages/Monthly";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "MonthlyStaging",
  components: { Monthly },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: null,
        beginDate: "",
        endDate: "",
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      PersonnelDia: false, //分期明细弹窗开关!
      executeTime: "",
      ids: [],
      fileParmas: {},
      golbalPermissions: [],
    };
  },
  created() {
    this.getList();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function () {
      return checkPermiss("business:sign:exportMonth", this.golbalPermissions);
    },
  },
  methods: {
    //   获取数据
    getList() {
      getPageMonth(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 分期明细
    detailsFun(row) {
      this.PersonnelDia = true;
      this.executeTime = row.executeTime;
    },
    // 查看分期
    viewStagingFun() {},
    // 重新签约
    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.pageNo = 1;
      this.getList();
    },
    // 搜索按钮
    queryFun() {
      this.query.pageNo = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    // 批量
    getRowKey(row) {
      return row.orderId;
    },
    changeFun(row) {
      this.ids = row.map((item) => item.executeTime);
    },
    orderExport() {
      this.fileParmas.ids = this.ids;
      this.fileParmas.beginDate=this.query.beginDate;
      this.fileParmas.endDate=this.query.endDate;
      expotOut(
        "get",
        "/business/sign/exportMonth",
        this.fileParmas, // 导出请求参数
        "月份分期表" // 导出文件名字
      );
    },
    //点击逾期扣款记录
    onOverdueRecord(){
      this.$router.push(`/Index/OverdueRecord`)

    }
  },
};
</script>

<style scoped type="less">
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
.query ::v-deep .el-input__inner
{
    height: 32px;
}
.query ::v-deep .el-input__icon
{
    line-height: 32px;
}
.query ::v-deep .el-form-item
{
    width: 320px;
}
.query ::v-deep .vue-treeselect__control
{
    line-height: 30px;  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder
{
    line-height: 30px;
}
::v-deep .btn .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.box
{
    position: relative;  padding: 20px 20px 50px 20px;  background: #fff;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}

</style>
